<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" href="../../css/allApp.css" />-->
		<link rel="stylesheet" href="../css/css.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
		<style type="text/css">
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}

			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}

			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}

			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}

			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}

			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
			-webkit-transition-duration: 400ms;
			transition-duration: 400ms;*/

				margin: 0;
			}

			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}

			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}

			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}

			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}

			.mui-pull-top-canvas canvas {
				width: 40px;
			}

			body,
			.mui-content {
				background-color: #FFFFFF;
			}

			.mui-bar .mui-title {
				right: 80px;
				left: 80px;
			}

			.yxj-row {
				width: 92%;
				margin-left: 4%;
				padding: 10px;
				border-bottom: 1px solid #eaeaea;
			}

			.marbtm {
				margin-bottom: 6px;
			}

			.colorA3A3A3 {
				color: #A3A3A3;
			}

			.color1A5186 {
				color: #1A5186;
			}

			.flex {
				display: flex;
			}

			.justcnt {
				justify-content: space-between;
			}

			.fontsize13 {
				font-size: 13px;
			}

			.fontsize15 {
				font-size: 15px;
			}

			[v-cloak] {
				display: none;
			}

			.wifi {
				width: 80%;
				margin: 100px auto;
				text-align: center;
			}

			.wifi img {
				width: 80%;
				margin-right: 20px;
			}

			.wifi p {
				font-size: 1rem;
			}

			.pad {
				margin-top: 38px;
			}

			#search_div {
				width: 100%;
				background: #fff;
				position: fixed;
				top: 44px;
				width: 100%;
				right: 0;
				left: 0;
				border-radius: 0px;
				height: auto;
				opacity: 1;
				background-size: contain;
				background-color: #fff;
				/*background:none;/*谷歌*/

				/*background-color: #cea86a;*/
				padding: 10px 0px 0px 0px;
				border-top: 1px solid #efefef;
				z-index: 12;
				display: none;
			}

			#tip_divMask {
				position: fixed;
				top: 44px;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
				background-color: #000;
				opacity: .3;
				z-index: 10;
				display: none;
			}

			.input_row {
				width: 100%;
				line-height: 40px;
				height: 40px;
				padding: 0 20px;
				font-size: 0.9rem;
				margin-bottom: 15px;
			}

			.input_row input {
				width: 70%;
				float: left;
				font-size: 0.9rem;
				border: 0;
				background: #f7f7f7;
				margin-bottom: 0;
			}

			.input_time input {
				background: #f7f7f7 url(../../img/date.png) right no-repeat;
			}

			.input_row span {
				width: 25%;
				float: left;
				text-align: right;
			}

			.input_row a input {
				color: #333;
			}

			.Btn {
				border-top: 1px solid #efefef;
				/*padding: 10px 0;*/
			}

			.Btn button {
				line-height: 40px;
				border: 0px;
				border-radius: 0px;
			}

			#reset {
				border-right: 1px solid #efefef;
				border-radius: 0px;
			}

			#sure {
				color: #2e73f6;
			}

			.tabbtn {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content:space-evenly;
				margin-top: 5px;
			}

			.tabbtn>a {
				width: 80px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				font-size: 14px;
				display: block;
			}

			.tabbtn .active {
				color: #FF0000;
			}

			.tabbtn .mui-active {
				color: #1A5186!important;
				border-bottom: 2px solid #004A86!important;
			}

			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
				height: 0px !important;
			}
			.mui-pull-bottom-tips{
				background-color: #ffffff!important;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{
				border-top:0px !important;
			}
			.line2{
				width: 100%;
				height: 3px;
				background-color: #eaeaea;
				margin-top: -1px;
			}
			.mui-bar-nav,.mui-bar{
				box-shadow: 0px 0px 0px #ccc;
				-webkit-box-shadow: 0px 0px 0px #ccc; 
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">已巡检</h1>
			<a class="mui-icon mui-icon-search mui-icon-right-nav mui-pull-right" id="search"></a>
		</header>

		<div class="mui-content " id="content">


			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl"
					class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="tabbtn">
						<a class="mui-control-item mui-active" href="#item1mobile" data-id="1">
							升压站巡检
						</a>
						<a class="mui-control-item" href="#item2mobile" data-id="2">
							设备巡检
						</a>
						<a class="mui-control-item" href="#item3mobile" data-id="3">
							线路巡检
						</a>
					</div>
					<div class="line2"></div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" >
									<li class="mui-table-view-cell yxj-row1" v-for="(item,index) in data" :key="index" :data-name="(item.name)" :data-id="(item.id)" :data-rate="(item.rate)">
										<div class="marbtm fontsize15">{{item.name}}</div>
										<div class="colorA3A3A3 fontsize13">开始时间：{{item.start_time}}</div>
										<div class="colorA3A3A3 flex justcnt fontsize13">
											<span>结束时间：{{item.end_time}}</span>
											<span class="color1A5186">耗时{{item.cost}}</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" >
									<li class="mui-table-view-cell yxj-row2" v-for="(item,index) in data1" :key="index" :data-id="(item.id)" >
										<div class="marbtm fontsize15">{{item.name}}</div>
										<div class="colorA3A3A3 fontsize13">开始时间：{{item.inspect_time}}</div>
										<div class="colorA3A3A3 flex justcnt fontsize13">
											<span>结束时间：{{item.submit_time}}</span>
											<span class="color1A5186">耗时{{item.cost}}</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" >
									<li class="mui-table-view-cell yxj-row3" v-for="(item,index) in data2" :key="index" :data-name="(item.name)" :data-id="(item.id)">
										<div class="marbtm fontsize15">{{item.name}}</div>
										<div class="colorA3A3A3 fontsize13">开始时间：{{item.start_time}}</div>
										<div class="colorA3A3A3 flex justcnt fontsize13">
											<span>结束时间：{{item.end_time}}</span>
											<span class="color1A5186">耗时{{item.cost}}</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="wifi" v-if="tabindex == 1 && ifshow"><img src="./../img/empty_data.png"/><p>亲，这里没有数据了哦~</p></div>
			<div class="wifi" v-if="tabindex == 2 && ifshow1"><img src="./../img/empty_data.png"/><p>亲，这里没有数据了哦~</p></div> -->
		</div>
		<div id="search_div" style="overflow: hidden; background-color: #fff;">
			<div class="input_row input_time">
				<span>开始时间：</span><input type="text" placeholder="请选择开始时间" id="startTime" readonly="" />
			</div>
			<div class="input_row input_time">
				<span>结束时间：</span><input type="text" placeholder="请选择结束时间" id="endTime" readonly="" />
			</div>
			<div class="Btn mui-row">
				<button type="button" class="mui-btn mui-col-sm-6 mui-col-xs-6" id="reset">重置</button>
				<button type="button" class="mui-btn mui-col-sm-6 mui-col-xs-6" id="sure">确定</button>

			</div>
		</div>
		<div id="tip_divMask"></div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/mkeyplus.base.xunjian.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-1.7.2.min.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.dtpicker.js"></script>
		<script src="../../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			setTimeout(() => {
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				mui('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true,
					deceleration: deceleration
				});
			}, 200)
			window.vm = new Vue({
				el: "#content",
				data: {
					data: [],
					ifshow: false,
					ifshow1: false,
					ifshow2: false,
					pageSize: 10,
					pageNumber: 1,
					pageSize1: 10,
					pageNumber1: 1,
					pageSize2: 10,
					pageNumber2: 1,
					time: '',
					data1: [],
					data2: [],
					tabindex: 1
				}
			});
			var org_code1 = '';
			var qhindex = 0;
			mui.plusReady(function() {
				mui('.mui-slider').slider().stopped = true;
				$('#reset').on('tap', function() {
					resetBtn();
				});
				$('#sure').on('tap', function() {
					if ($('#startTime').val() != "" && $('#endTime').val() != '') {
						vm.time = $('#startTime').val() + '~' + $('#endTime').val();
					}
					$('#search').removeClass("show");
					closeMask();
					if(vm.tabindex == 1){
						vm.pageNumber = 1;
						vm.data = [];
						getDataLeft('1');
					}else if(vm.tabindex == 3){
						vm.pageNumber2 = 1;
						vm.data2 = [];
						getDataLeft('2');
					}else{
						vm.pageNumber1 = 1;
						vm.data1 = [];
						getDataRight();
					}
				});

				//日期选择
				var dtpicker = new mui.DtPicker({
					type: "datetime", //设置日历初始视图模式 
					labels: ['年', '月', '日', '时', '分']
				});
				// 点击日期选择的 标签赋值 选中的日期
				$('#startTime').on('tap', function() {
					$('#name').blur();
					mui('#satusF').popover('hide');
					dtpicker.show(function(e) {
						$('#startTime').val(e.value + ":00");
					});
				});
				$('#endTime').on('tap', function() {
					$('#name').blur();
					mui('#satusF').popover('hide');
					dtpicker.show(function(e) {
						$('#endTime').val(e.value + ":00");
					});
				});

				var org_code = localStorage.getItem('org_code'); //获取缓存中的风场编号
				org_code1 = JSON.parse(org_code);
				getListChild();
				initRefresh();
			})
			$('#content').on('tap', '.mui-control-item', function() {
				vm.tabindex = $(this).attr('data-id');
			})
			 

			function initRefresh() {
				mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {
								console.log('....12');
								var self = this;
								setTimeout(function() {
									if(index == 0){
										self.refresh(true);  
										vm.pageNumber = 1;
										vm.data = [];
										getDataLeft('1',self);
									}else if(index == 2){
										self.refresh(true);
										vm.pageNumber2 = 1;
										vm.data2 = [];
										getDataLeft('2',self);
									}else{
										self.refresh(true);  
										vm.pageNumber1 = 1;
										vm.data1 = [];
										getDataRight(self);
									}
									self.endPullDownToRefresh();
								}, 1000);
							}
						},
						up: {
							auto:true,
							callback: function() {
								var self = this;
								setTimeout(function() {
									console.log('index......'+index);
									if(index == 0){
										getDataLeft('1',self);
									}else if(index == 2){
										getDataLeft('2',self);
									}else{
										getDataRight(self);
									}
								}, 1000);
							}
						}
					});
				});
			}

			var handler = function(e) {
				e.preventDefault();
				e.stopPropagation();
			};

			document.getElementById("tip_divMask").addEventListener("tap", function() {
				$('#search').removeClass("show");
				closeMask();
			});

			document.getElementById('search').addEventListener('tap', function() {
				if ($(this).hasClass("show")) {
					$(this).removeClass("show");
					closeMask();
				} else {
					$(this).addClass("show");
					openMask();
				}

			})
			//重置
			function resetBtn() {
				$("#search_div input").val("");
				vm.time = '';
			}

			function openMask() {
				// plus.webview.currentWebview().setPullToRefresh({
				// 	support: false
				// });
				document.body.addEventListener('touchmove', handler, false);
				document.body.addEventListener('wheel', handler, false);
				$('#tip_divMask').fadeIn(200);
				$('#search_div').fadeIn(200);
			}

			function closeMask() {
				// plus.webview.currentWebview().setPullToRefresh({
				// 	support: true,
				// 	style: "circle"
				// });
				document.body.removeEventListener('touchmove', handler, false);
				document.body.removeEventListener('wheel', handler, false);
				$('#tip_divMask').fadeOut(200);
				$('#search_div').fadeOut(200);
			}

			function getDataLeft(type, self) {
				console.log('time=' + vm.time);
				mui.baseApp.httpRequst('/api/v2/sbxj/findXsdWindListByPage', {
						wind: org_code1,
						status: '3,4',
						pageSize: vm.pageSize,
						pageNumber: vm.pageNumber,
						time: vm.time,
						type:type
					},
					function(res) {
						var data = res.data.list;
						if(type == '1'){
							vm.ifshow = false;
							console.log('频次......' + data.length);
							if (data.length < 10) {
								vm.data = vm.data.concat(data);
								self && self.endPullUpToRefresh(true);
								if(vm.pageNumber == 1 && data.length == 0){
									vm.ifshow = true;
									// $('.mui-pull-bottom-tips').css('display','none')
								}
							} else {
								vm.data = vm.data.concat(data);
								vm.pageNumber++;
								self && self.endPullUpToRefresh();
							}
						}else{
							vm.ifshow2 = false;
							console.log('线路......' + data.length);
							if (data.length < 10) {
								vm.data2 = vm.data2.concat(data);
								self && self.endPullUpToRefresh(true);
								if(vm.pageNumber2 == 1 && data.length == 0){
									vm.ifshow2 = true;
									// $('.mui-pull-bottom-tips').css('display','none')
								}
							} else {
								vm.data2 = vm.data2.concat(data);
								vm.pageNumber2++;
								self && self.endPullUpToRefresh();
							}
						}
					}
				);
			}
			
			function getDataRight(self) {
				console.log('time=' + vm.time);
				mui.baseApp.httpRequst('/api/v2/sbxj/xjList', {
						wind: org_code1,
						pageSize: vm.pageSize1,
						pageNumber: vm.pageNumber1,
						time: vm.time
					},
					function(res) {
						vm.ifshow = false;
						console.log('设备......' + JSON.stringify(res));
						var data = res.data.list;
						if (data.length < 10) {
							vm.data1 = vm.data1.concat(data);
							self && self.endPullUpToRefresh(true);
							if(vm.pageNumber1 == 1  && data.length == 0){
								vm.ifshow1 = true;
								// $('.mui-pull-bottom-tips').css('display','none')
							}
							
						} else {
							vm.data1 = vm.data1.concat(data);
							vm.pageNumber1++;
							self && self.endPullUpToRefresh();
						} 
					}
				);
			}

			function getListChild() {
				$('#content').on('tap', '.yxj-row1', function() {
					var sbid = $(this).attr('data-id');
					var rate = $(this).attr('data-rate');
					var name = $(this).attr('data-name');
					var title = name.substring(5);

					mui.openWindow({
						url: 'yxjlistchild.html',
						id: 'yxjlistchild.html',
						extras: {
							sbid: sbid,
							title: title
						},
						createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					})
				});
				
				$('#content').on('tap', '.yxj-row3', function() {
					var sbid = $(this).attr('data-id');
					var name = $(this).attr('data-name');
				
					mui.openWindow({
						url: 'yxjlistchild.html',
						id: 'yxjlistchild.html',
						extras: {
							sbid: sbid,
							title: name
						},
						createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					})
				});
				
				$('#content').on('tap', '.yxj-row2', function() {
					var id = $(this).attr('data-id');
					mui.openWindow({
						url: 'yulan.html',
						id: 'yulan.html',
						extras: {
							_id: id,
							Type: '',
							from:'yxj'
						},
						createNew: false
					})
				});
			}
		</script>
	</body>

</html>
